import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Input, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../api/zzachieve';
import * as service1 from '../../../api/zzachieve1';
import ExportJsonExcel from 'js-export-excel'
import "./AchieThird.scss"

interface Props {

}

interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
}
function AchieThird(props: Props) {

    // useEffect(() => {
    //     service.people_files().then((ok) => {
    //         console.log(ok.data);
    //         ok.data.map((item: any) => {
    //             item.key = item.id
    //         })
    //         setTableData(ok.data)
    //     })
    // }, [])
    useEffect(() => {
        service1.people_files().then((ok) => {
            console.log(ok.data);
            ok.data.map((item: any) => {
                item.key = item.id
            })
            setTableData(ok.data)
        })
    }, [])

    let [tabledata, setTableData] = useState([])

    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const { Search } = Input;


    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };

    // let onSearch = async (value: String) => {
    //     let res = await service.people_filesearch({ name_like: value })
    //     console.log(res.data);
    //     res.data.map((item: any) => {
    //         item.key = item.id
    //     })
    //     setTableData(res.data)
    // }
    let onSearch = async (name: any) => {
        let res = await service1.people_filesearch({ name })
        // console.log(name);
        
        console.log(res.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data)
    }

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    const columns: ColumnsType<DataType> = [
        {
            title: '被考核员工',
            dataIndex: 'name',
            key: "name"
        },
        {
            title: '工号',
            dataIndex: 'age',
            key: "age"
        },
        {
            title: '员工部门',
            dataIndex: 'address',
            key: "address"
        },
        {
            title: '职位',
            dataIndex: 'position',
            key: "position"
        },
        {
            title: '考核次数',
            dataIndex: 'num',
            key: "num"
        },
        {
            title: '考核平均分',
            dataIndex: 'score',
            key: "score"
        },
        {
            title: '最近一次考核分数',
            dataIndex: 'laterscore',
            key: "laterscore"
        },
        {
            title: '最近一次考核等级',
            dataIndex: 'level',
            key: "level"
        },
        {
            title: '操作',
            dataIndex: 'e',
            key: "e",
            render: (_, record) => {
                return <>
                    <a onClick={handlemore}>查看详情</a>
                </>
            }
        },
    ];
    let navigate = useNavigate()
    let handlemore = () => {
        navigate('/index/achievements/achieThirdMore')
    }

    let down = () => {
        let option: {
            fileName: string
            datas: {//声明下面的类型
                sheetData: any[],
                sheetName: string,
                sheetFilter: string[],
                sheetHeader: string[],
                columnWidths: number[]
            }[]
        };
        option = {
            fileName: "员工考核计划", // 导出的文件的名称
            datas: [
                {
                    sheetData: tabledata, // 表格数据
                    sheetName: "产品列表1", // excel表格中表格的名字
                    sheetFilter: ["name", "age", "position", "address"], // 需要导出的数据的字段
                    sheetHeader: ["姓名", "年龄", "职位", "部门"], // 表头的值
                    columnWidths: [20, 20],
                },
            ]
        }

        var toExcel = new ExportJsonExcel(option); //new
        toExcel.saveExcel(); //保存
    }

    return (
        <div>
            <div className='third'>
                <div className='top'>
                    <div className='colo'></div>
                    <div className='files'>员工绩效档案</div>
                </div>
                <div className='middle'>
                    <Search placeholder="请输入关键字"
                        onSearch={onSearch}
                        style={{ width: 300 }} />
                    <Button type="primary" ghost onClick={down}>导出</Button>
                </div>
                <div className='form'>
                    <span style={{ marginLeft: 8 }}>
                        {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                    </span>
                    <Table rowSelection={rowSelection} columns={columns} dataSource={tabledata} />
                </div>
            </div>

        </div>
    );
}

export default AchieThird;